<template>
  <div class="mcont">
      
    <div v-show="notick" style=" margin: 0 auto;
     text-align: center;" >还没有订单</div>

    <div class="block">
         

    
      <el-timeline>
        <el-timeline-item :timestamp="blog.created" placement="top" v-for="(blog,key) in blogs" :key=key>
            <!-- {blogId:blog.id}/-->
          <el-card>
            <el-container>
              <el-aside width="200px">
                 <router-link :to="{name:'ordermsg',params:{blogId:blog.id}}">
               <el-image  :src="blog.picture"   class="imgsize" style="width:50%;height:auto" ></el-image>
                 </router-link>
              
               </el-aside>
              <el-container>
                <el-header> <router-link :to="{name:'ordermsg',params:{blogId:blog.id}}"> {{blog.title}}({{blog.description}})</router-link> <div v-if="blog.useTime">使用日期:{{blog.useTime}}</div></el-header>
                <el-main>    
                  <el-row :gutter="20">
                    <el-col :span="6"><div class="grid-content bg-purple">数量:1张</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">价格:{{blog.price}}元</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                      <div v-if="blog.status==1" >类型: 电子票</div>
                      <div v-if="blog.status==2" >类型: 实体票</div>
                      <div v-if="blog.status==3" >类型: 电子票(申请退款中)</div>
                      <div v-if="blog.status==4" >类型: 电子票(已退款)</div>
                      <div v-if="blog.status==5" >类型: 实体票(申请退款中)</div>
                      <div v-if="blog.status==6" >类型: 实体票(已退款)</div>
                      </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                  
                  </el-row>
                </el-main>
                <el-footer><p style="float:right;  border:1px " v-if="!blog.useTime">
                  <el-button  @click="gorefund(blog)" v-if="blog.status==3" >查看申请理由</el-button>
                  <el-button  @click="gorefund(blog)" v-if="blog.status==5" >查看申请理由</el-button>
                  </p></el-footer>
                
              
               
              </el-container>
            </el-container>

             
            
              
          </el-card>
          
        </el-timeline-item>
      </el-timeline>

      <el-pagination class="mpage" background layout="prev, pager, next" 
      :current-page="currentpage" 
      :page-size="pageSize" 
      :total="total"
      @current-change=page
      >
      </el-pagination>
      
          <el-dialog title="退款理由" :visible.sync="dialogFormVisible">
            <!-- 
                      <el-form :model="form" :rules="rules">
                          <el-form-item label="退款理由" :label-width="formLabelWidth" >
                    <el-input minlength resize v-model="form.refund" autocomplete="off"></el-input>
                    <div></div>
                  </el-form-item>
         </el-form>
          <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
  -->
  <el-form :model="form" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="理由"
    prop="refund"
    :rules="[
      { required: true, message: '理由不能为空'},
    ]"
  >
    <el-input type="refund" v-model="form.refund" autocomplete="off" disabled></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm',1)">确认退款</el-button>
    <el-button type="primary" @click="submitForm('numberValidateForm',0)">取消退款</el-button>
    
  </el-form-item>
</el-form>

    </el-dialog>

    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Blogs.vue",
  components: { Header },
  data(){
      return {
        rules:{},
        form:{},
        dialogFormVisible:false,
          blogs:{},
          currentpage:1,
          total:0,
          title:'123',
          pageSize:5,
          input3:'',
          notick:false,
      }
  },
  methods:{
      page(currentpage){
          const _this = this
           if(!JSON.parse(sessionStorage.getItem("userInfo")).id){
              console.log('+++++++++++++++++++++++++++++++++')
               this.$notify({
      title: "请先登录！",
      message: "登录后查询",
      duration: 1500,
    })
              }
        _this.$axios.get("/order/allord",{
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
            console.log('currentpagemessage:')
          console.log(res)
          _this.blogs = res.data.data.records
          _this.currentpage = res.data.data.current
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.size
          console.log(res.data.data.records.length)
          

          })

         
      },
      gorefund(id){
          console.log(id)
          this.dialogFormVisible=true
          this.form=id
          
      },  submitForm(formName,ok) {
        const _this = this
        
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
             _this.$axios.post("/order/refund/"+ok,this.form,{
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
            console.log('申请退款:')
          console.log(res)

          })


            this.dialogFormVisible=false
            alert('提交完成!');
             this.$router.go(0);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    
      
     
      
  },
  created(){
     
      console.log(this.page)
      this.page(1)
  }
};
</script>
<style scoped>
 .mpage{
     margin: 0 auto;
     text-align: center;
 }
</style>